<script>
import { defineComponent, onUnmounted, reactive, ref, watch } from 'vue'
import { createPagination, Messages } from '@Config/config'
import * as Antd from 'ant-design-vue'
import { libFileDetail, libAddComment } from '@Config/server/api'
import { formtNumber, gt } from '@Untils'
import { message } from 'ant-design-vue'
export default defineComponent({
  props: {
    comment: {
      type: Object,
      default: () => {
        return {}
      },
    },
    file: {
      type: Object,
      required: true,
    },
  },
  emits: ['result'],
  setup(props, context) {
    let records = reactive({ data: [] })

    //表格分页
    let pagination = reactive({
      data: createPagination(
        async (e) => {
          let _params = {
            id: props.file.id,
            isComment: 1,
            index: pagination.data.current,
            size: pagination.data.pageSize,
          }
          let _r = await libFileDetail(_params)

          if (_r.code == 0) {
            pagination.data.pageSize = _r.data.comment.size
            pagination.data.current = _r.data.comment.index
            pagination.data.total = _r.data.comment.total
            records.data = _r.data.comment.records
          } else {
            Messages.add(message.error(`获取数据失败[${_r.msg}]`))
          }
        },
        true,
        false
      ),
    })

    let _w = watch(
      () => props.comment,
      () => {
        pagination.data.pageSize = 5
        pagination.data.current = 1
        pagination.data.total = props.comment.total
        records.data = props.comment.records
      },
      {
        immediate: true,
        deep: true,
      }
    )

    onUnmounted(() => {
      _w()
    })

    let commentData = reactive({
      score: 5,
      content: null,
    })

    //提交
    let commitHandler = () => {
      commentForm.value.validate().then(async () => {
        let _params = {
          id: 0,
          libId: props.file.id,
          ...commentData,
        }
        commentLoading.value = true
        let _r = await libAddComment(_params)
        commentLoading.value = false

        if (_r.code == 0) {
          Messages.add(message.success('操作成功'))
          records.data.unshift(_r.data)
          commentData.score = 5
          commentData.content = null
          commentForm.value.clearValidate()
          context.emit('result', {
            newRecord: _r.data,
            originId: props.file.id,
          })
        } else {
          Messages.add(message.error(`操作失败[${_r.msg}]`))
        }
      })
    }

    let commentLoading = ref(false)
    let commentForm = ref()

    return {
      props,
      pagination,
      records,
      commentData,
      commitHandler,
      commentForm,
      commentLoading,
    }
  },

  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        {this.records?.data?.length > 0 && (
          <Antd.Col span={24}>
            <ul class="comment_container">
              {this.records.data.map((_item) => {
                return (
                  <li>
                    <div class="comment_header">
                      <div class="green">
                        <b>{formtNumber(_item.score, '0.00')}分</b>
                      </div>
                      <div class="ant-statistic-title">
                        {_item.operatorName}-{_item.updateTime}
                      </div>
                    </div>
                    <div class="comment_content">{_item.content}</div>
                  </li>
                )
              })}
            </ul>
          </Antd.Col>
        )}
        {this.records?.data?.length > 0 && this.pagination.data.total > 5 && (
          <Antd.Col span={24}>
            <Antd.Pagination {...this.pagination.data} />
          </Antd.Col>
        )}
        <Antd.Col span={24}>
          <Antd.Form model={this.commentData} ref="commentForm">
            <Antd.Row gutter={[10, 10]}>
              <Antd.Col span={24}>
                <Antd.Space>
                  <Antd.FormItem
                    name="score"
                    rules={[
                      {
                        validator: gt,
                        value: 0,
                        message: '请选择评分',
                      },
                    ]}
                  >
                    <Antd.Rate
                      allowHalf={true}
                      value={this.commentData.score}
                      count={10}
                      onChange={(e) => {
                        this.commentData.score = Number(e)
                        this.commentForm.validateFields('score')
                      }}
                    />
                    {this.commentData.score != null && (
                      <span class="red">{this.commentData.score}分</span>
                    )}
                  </Antd.FormItem>
                </Antd.Space>
              </Antd.Col>

              <Antd.Col span={24}>
                <Antd.FormItem
                  name="content"
                  rules={[
                    { max: 255, message: '评论最多255个字符' },
                    {
                      required: true,
                      message: '请输入评论内容',
                    },
                  ]}
                >
                  <Antd.Textarea
                    placeholder="请输入评论"
                    value={this.commentData.content}
                    showCount={true}
                    onChange={(e) => {
                      this.commentData.content = e.target.value
                      this.commentForm.validateFields('content')
                    }}
                  />
                </Antd.FormItem>
              </Antd.Col>

              <Antd.Col span={24}>
                <Antd.Space>
                  <Antd.Button
                    type="primary"
                    onClick={this.commitHandler}
                    loading={this.commentLoading}
                  >
                    提交
                  </Antd.Button>
                </Antd.Space>
              </Antd.Col>
            </Antd.Row>
          </Antd.Form>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>

<style scoped>
.comment_container,
.comment_container li,
.comment_header,
.comment_content {
  width: 100%;
  overflow: hidden;
}
.comment_container li {
  border-bottom: 1px solid #f0f0ff;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.comment_header {
  display: flex;
  justify-content: space-between;
}
.comment_content {
  padding-top: 10px;
}
</style>
